<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //   function MyObject() {
      //     this.value = 42;

      //     // 匿名函数
      //     this.anonymousFunction = function () {
      //       console.log(this.value, this); // 这里的this指向MyObject的实例
      //     };

      //     // 箭头函数
      //     this.arrowFunction = () => {
      //       console.log(this.value, this); // 这里的this也指向MyObject的实例，因为箭头函数捕获了外部函数的this
      //       // cb：这里的this创建实例的时候已经指向了实例，其他作用域调用这个函数，this一直指向该实例
      //     };
      //   }

      //   const obj = new MyObject();

      //   //   obj.anonymousFunction(); // 输出: 42
      //   //   obj.arrowFunction(); // 输出: 42

      //   // 如果作为回调函数使用
      //   setTimeout(obj.anonymousFunction, 1000); //这里是把这个函数的引用放在这，调用的对象时window // 输出可能是undefined或window（取决于环境），因为this指向了全局对象
      //   setTimeout(() => {
      //     // const a=obj.anonymousFunction
      //     // a()
      //     obj.anonymousFunction(); //cb:this主要是由调用对象决定的，这里的调用对象是obj,
      //     // cb:一.这里的箭头函数只是作为一个回调函数给真正执行的函数搭建一个window作用域的环境，实现调用的函数可以选择他的调用对象
      //   }, 1000);
      //   setTimeout(obj.arrowFunction, 1000); // // 输出: 42，因为箭头函数捕获了外部this
      //   let abc=obj.arrowFunction  // cb：四、箭头函数已经绑定了实例化对象，此时this不再改变
      //   abc()
      // ------------------------------------------------------------------------------

      //  创建一个对象，该对象有一个方法（使用传统函数）和一个属性（箭头函数）
      const obj = {
        value: 10,
        method: function () {
          console.log(this.value); // 这里 "this" 指向 obj
          let kkx = this;
          console.log(kkx, "kkx");
          // 定义一个箭头函数作为回调函数
          setTimeout(() => {
            console.log(this.value); // 这里 "this" 同样指向 obj，因为箭头函数捕获了外部函数的 "this"，cb:外部函数指的是method这个匿名函数
          }, 1000);
          return () => {
            console.log(this.value, this, 123);
          };
        },
        arrowFunc: () => {
          console.log(this.value); // 这里 "this" 不会指向 obj，而是指向全局对象（在浏览器中是 window）
        },
        dsdc: this,
      };

      // 调用方法
      obj.method(); // 输出：10（两次，因为setTimeout中的箭头函数也捕获了相同的 "this"）

      // 尝试调用箭头函数
      obj.arrowFunc(); // 输出：undefined（在严格模式下）或可能是一个全局变量的值（在非严格模式下）
      // 注意：这里的 "this" 不指向 obj，因为箭头函数在定义时并没有绑定到 obj 的上下文
      //   cb：二、寻找箭头函数的this，要看当前作用域的this
      //   cb：全局作用域 this指向window，非箭头函数作用域 this指向调用它的对象，块级作用域 this指向window
      //   cb：词法作用域意味着代码写完了作用域就确定了，所以如果想要修改箭头函数的this，就把它放在某个具名函数的作用域内
      //   cb：这样当具名函数的this发生变化了，箭头函数的this也就改变了

      // 为了证明箭头函数不绑定自己的 "this"，我们可以在全局作用域中定义一个变量
      window.value = "global"; // 假设我们在浏览器环境中
      obj.arrowFunc(); // 输出：'global'（在浏览器环境中，箭头函数捕获了全局对象的 "this"）
      console.log(obj.dsdc);
      const ak = obj.method;
      const a = obj.method();
      console.log(a(), ak()()); //cb:三、通过非箭头函数作用域变化，箭头函数绑定this以后不再改变
      /*早上8.35到早上9.10分，
      早上9.10分到中午11.30， 1.一个小时的工作，2.一个小时js学习，中间20分钟忙的时候分给工作，闲的时候分给js
      中午11.30到下午1.10分，  11.30-12.00吃完饭，3.12.00-12.30在外面散步此时不玩手机，4.12.30上来睡觉，12.35开始睡
      下午1.10分到5.45，5.一个小时的工作，6.一个小时的js学习，7.一个小时的工作，8.一个小时的学习，9.还有35分钟总结今天的学习，发布到文档上
      不加班
      下午5.45到晚上6.10分 */
      /* 晚上6.20到深夜10.15分，10.瑜伽垫锻炼20分钟，吃饭40分钟(半小时做饭一小时吃饭)，11.散步30分钟--可以用来骑车买菜
      晚上7.50到10.00分 12.学习日语一个小时 13.学习js一个小时，14.复盘js 10分钟
      10.00到10.15分 15.洗脸刷牙6分钟泡脚9分钟 或者洗澡刷牙15分钟
      深夜10.15到早上6.25分，睡觉
      6.25分到早上7.30,6.20-6.30洗脸刷牙，16.6.30-6.45出去呼吸新鲜空气,6.45-7.10瑜伽垫锻炼
      7.00到早上7.30 17.学习日语半个小时
      早上7.30到早上8.00分 18.做中午饭
      8.00分到8.20吃早饭 换衣服 刮胡子
      */
      // 5.45到晚上6.10分散步吃饭, 6.10分-7.00学习js 7.10分-8.00联调
      // 8.40-9.30 瑜伽垫锻炼20分钟，散步30分钟;9.30-10.00学习日语
    </script>
  </body>
</html>
